<template>
  <div>
    <h3><span id="gun">丨</span> 财务管理</h3>
    <div>
      <el-select v-model="value" placeholder="全部">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
          @click.native="stateSearch(item.label)">
        </el-option>
      </el-select>


      <el-date-picker v-model="TradingTime" @change="getByOrderPayTime" type="daterange" :picker-options="pickerOptions"
        start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
      </el-date-picker>
      <el-input v-model="number" placeholder="输入订单号，交易流水号"></el-input>
      <el-button type="primary" @click="search(number)">查询</el-button>
      <el-button @click="reset()">重置</el-button>

    </div>
    <div id="table">
      <el-table :data="showTableData" style="width: 100%">
        <el-table-column prop="orderId" label="订单编号" align="center">
        </el-table-column>
        <el-table-column prop="id" label="交易流水号" align="center">
        </el-table-column>
        <el-table-column prop="projects[0].price" label="支付金额" align="center">
        </el-table-column>
        <el-table-column prop="orders[0].refundAmount" label="退款金额" align="center">
        </el-table-column>
        <el-table-column prop="projects[0].price" label="结算金额" align="center">
        </el-table-column>
        <el-table-column prop="orders[0].state" label="状态" :formatter="formatter" align="center">
        </el-table-column>
        <el-table-column prop="orders[0].paymentTime" label="支付时间" align="center" min-width="120">
        </el-table-column>
        <el-table-column prop="orders[0].refundTime" label="退款时间" align="center" min-width="120">
        </el-table-column>
        <el-table-column prop="orders[0].refundTime" label="结算时间" align="center" min-width="120">
        </el-table-column>
        <el-table-column prop="handle" label="操作" align="center" :formatter="formatter">
          <template slot-scope="scope">
            <el-tag :type="scope.row.state === 4 ? 'success' : 'danger'" @click="changState(scope.row)" class="btn">
              {{ scope.row.state === 4 ? "允许结算" : "禁止结算" }}
            </el-tag>
          </template>
        </el-table-column>

      </el-table>
    </div>

    <!-- 分页 -->

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[2, 4, 10, 50]" :page-size="pageSize" layout=" prev, pager, next" :total="tableData.length">
    </el-pagination>

  </div>

</template>

<script>

export default {
  name: 'Financial',


  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }],
      },
      time: '',//搜索的input1框
      number: '',//搜索的input2框
      currentPage: 1,//方当前页
      pageSize: 4,//每页条数
      tableData: [],
      TradingTime: [],
      begin: '',
      end: '',
      value: '',
      input: '',
      state: '',
      options: [{
        value: '选项1',
        label: '全部'
      }, {
        value: '选项2',
        label: '已支付'
      }, {
        value: '选项3',
        label: '退款中'
      }, {
        value: '选项4',
        label: '已退款'
      }, {
        value: '选项5',
        label: '待结算'
      }, {
        value: '选项6',
        label: '已结算'
      }],
      value: ''

    };
  },
  methods: {
    // 和分页相关的函数
    // 每页多少条数据被改变的时候触发的函数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
    },
    //当前页码被改变触发的函数
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
    },
    //就是首先拿到这个单元格的值，通过函数return返回一个新值  再来给这个单元格
    //改变状态码与结算转换
    formatter(row, column) {
      if (row.orders[0].state == 1) {
        row.orders[0].state = '已支付'
      } else if (row.orders[0].state == 2) {
        row.orders[0].state = '退款中'
      } else if (row.orders[0].state == 3) {
        row.orders[0].state = '已退款'
      } else if (row.orders[0].state == 4) {
        row.orders[0].state = '待结算'
      } else if (row.orders[0].state == 5) {
        row.orders[0].state = '已结算'
      }
      return row.orders[0].state
    },
    //查询所有渲染数据
    getFinancial() {
      this.$axios({
        url: 'http://172.16.113.134:8080/finance/getAll',
        method: 'get'
      }).then((res) => {
        console.log('获取所有财务信息', res);
        if (res.code === 200) {
          this.tableData = res.data
          // console.log(this.tableData);
        }
        else {
          this.$message({
            message: '服务器出错了',
            type: 'error'
          });
        }
      }).catch((err) => {
        console.log('获取财务信息失败', err);
      })
    },

    //重置页面
    reset() {
      this.getFinancial()
    },

    //搜索查询按钮
    search(number) {
      console.log('搜索查询的值', number);
      //发起请求
      this.$axios({
        url: 'http://172.16.113.134:8080/finance/getByFinanceIdOrOrderId',
        method: 'get',
        params: {
          count: number
        }
      }).then((res) => {
        console.log('搜索的结果', res);
        if (res.code === 200) {

          this.$message({
            message: '查询成功!',
            type: 'success'
          });
          this.tableData = [...res.data];
          this.number = ''
        } else {
          this.$message({
            message: '查询失败!',
            type: 'error'
          });
        }
      }).catch((err) => {
        console.log('查询信息失败', err);

      })
    },
    //搜索查询时间
    getByOrderPayTime() {
      console.log("查询的值", this.TradingTime[0]);
      this.begin = this.TradingTime[0].toLocaleString();
      this.end = this.TradingTime[1].toLocaleString();
      this.$axios({
        url: "http://172.16.113.134:8080/finance/getByOrderPayTime",
        method: "get",
        params: {
          begin: this.begin,
          end: this.end
        },
      })
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: "查询成功!",
            });
            this.tableData = [...res.data];
            this.TradingTime = ''
            this.begin = ''
            this.end = ''
          } else {
            this.$message({
              type: "error",
              message: "查询失败!",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });

    },
    //选择状态对应的订单
    stateSearch(label) {
      console.log('点击了');
      console.log(label);
      if (label == '已支付') {
        this.state = 1
        this.getByState()
      } else if (label == '退款中') {
        this.state = 2
        this.getByState()
      } else if (label == '已退款') {
        this.state = 3
        this.getByState()
      } else if (label == '待结算') {
        this.state = 4
        this.getByState()
      } else if (label == '已结算') {
        this.state = 5
        this.getByState()
      } else if (label == '全部') {
        this.getFinancial()
      }

    },
    //状态请求
    getByState() {
      this.$axios({
        url: "http://172.16.113.134:8080/finance/getByState",
        method: "get",
        params: {
          state: this.state,
        },
      })
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: "查询成功!",
            });
            this.tableData = [...res.data];
            this.state = ''
          } else {
            this.$message({
              type: "error",
              message: "查询失败!",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.getFinancial()
  },
  mounted() { },
  computed: {
    showTableData() {
      let start = this.pageSize * (this.currentPage - 1)
      let end = start + this.pageSize
      let data = this.tableData.slice(start, end)
      return data
    }
  },
  watch: {},
}

</script>

<style scoped>
.el-input {
  width: 300px;
  margin-right: 30px;
  margin-left: 30px;

}

.el-button {
  margin-right: 20px;
}

#table {
  margin-top: 30px;
}

.el-pagination {
  margin-left: 500px;
  margin-top: 40px;
}

.el-date-picker {
  margin-right: 30px;
}

#gun {
  color: #0082cc;
}
</style>
